<template>
    <div class="container containerStudent">
        <!-- header -->
        <div class="header">
            <div>
                <div class="header-box">
                    <p style="paddingRight: 10px">表单名称</p>
                    <el-select
                        v-model="value"
                        @change="selectTitle()"
                        placeholder="请选择"
                        filterable
                        clearable
                        size="small"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.form_no"
                            :label="item.title"
                            :value="item.form_no"/>
                    </el-select>
                </div>
            </div>
            <div class="header-box">
                <el-button
                    type="primary"
                    size="small"
                    @click="addForm()"
                >
                    新建表单
                </el-button>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            height="100%"
            style="width: 100%;"
            border
            :data="tableData"
            @sort-change="handleSortChanged"
        >

            <el-table-column
                label="序号"
                width="100px"
                type="index"
            />
            <el-table-column
                prop="title"
                label="表单名称"
                show-overflow-tooltip
            />
            <el-table-column
                prop="form_no"
                label="表单编号"
                show-overflow-tooltip
            />
            <el-table-column
                prop="form_item_count"
                label="表单题量"
                :width="100"
                show-overflow-tooltip
            />
            <el-table-column
                label="浏览量"
                align="center"
                show-overflow-tooltip
                sortable="custom"
                :formatter="emptyFormatter"
                :width="90"
                prop="view_count"
            >
                <template slot-scope="scope">
                    <div style="text-align:center;">
                        {{ scope.row.view_count }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="提交量"
                align="center"
                show-overflow-tooltip
                sortable="custom"
                :formatter="emptyFormatter"
                :width="90"
                prop="submit_count"
            >
                <template slot-scope="scope">
                    <div style="text-align:center;">
                        {{ scope.row.submit_count }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="user_name"
                label="创建人"
                show-overflow-tooltip
            />
            <el-table-column
                prop="create_time"
                label="创建时间"
                sortable="custom"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="submit_success_msg"
                label="提交后提示语"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="type"
                min-width="80"
                label="预览"
            >
                <template slot-scope="scope">
                    <el-popover
                        placement="bottom"
                        title="扫描下方二维码"
                        width="200"
                        popper-class="preview-qr"
                        trigger="click"
                    >
                        <div class="preview-qr-wrap">
                            <img
                                :src="fnSetQrLink(scope.row)"
                                alt=""
                            >
                        </div>
                        <el-button
                            slot="reference"
                            type="text"
                        >预览</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="操作"
                fixed="right"
                :width="260"
            >
                <template slot-scope="scope">
                    <div>
                        <div>
                            <template v-if="scope.row.status != -99">
                                <el-button
                                    type="text"
                                    style="margin-left: 0;"
                                    @click="editFrom(scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    class="btn-delete"
                                    @click="submitToinfo(scope.row)"
                                >查看提交</el-button>
                                <el-button
                                    type="text"
                                    @click="toViewsubmit(scope.row)"
                                >统计结果</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnIfication(scope.row)"
                                    :disabled="scope.row.submit_count !== 0"
                                >
                                    删除
                                </el-button>
                            </template>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->
        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="tableData.length >= 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
        <!-- /分页 -->

    </div>
</template>

<script>
export default {
    data() {
        return {
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            options:[],
            value: '全部',
            tableData:[],
            value1:'',
            getTitlelist:[],
            sortMethod:'',
            sortFlag:'1',
            filterData: {
                sort_field: 0,
                sort_type: 1
            },
        };
    },
    created(){
        this.getNowpage();
        this.setHeader();
        this.getTableData();
    },
    mounted(){
        this.getsecelt();
    },
    methods:{
        /**
        * 设置表单header
        */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '自定义表单'
            },
            {
                title: "表单管理"
            }]
            );
        },
        //获取页码
        getNowpage () {
            let query = this.$route.query;

            if (query.page !== undefined) {
                this.page.now_page = Number(query.page);
            }
        },
        // 分页
        getTableDataselect(){
            if(this.searchValue[1]){
                this.chickvalue();
            } else{
                this.getTableData();
            }
        },
        /**
        * 过滤函数
        */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        // 获取表格信息
        getTableData (page) {
            let titleName = [];

            titleName = this.$route.query;
            this.$post('/student/custom_form%5Cget_list', {
                page_id: page || this.page.now_page,
                title:'',
                user_no:'',
                sort_field: this.filterData.sort_field,
                sort_type: this.filterData.sort_type
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },
        /**
         * 排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 0,
                descending: 1
            };

            let sortFieldMap = {
                'view_count': 1,
                'submit_count': 2,
                'create_time': 0
            };

            if (data.order) {
                this.filterData.sort_field = sortFieldMap[data.prop];
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },
        /**
         * 预览表单
         */
        fnSetQrLink(row) {
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${this.$studentBaseUrl}/pages/common/questionnaire?preview_key=${row.preview_key}`;

            let link = `${base}/__local/common%5Cqrcode?content=${url}&__ticket=${ticket}`;

            return link;
        },
        // 跳转到查看提交页面
        submitToinfo(row) {
            this.$router.replace({
                name:'checkSubmit',
                query: {
                    form_no:row.form_no,
                }
            });
        },
        // 跳转到编辑页面
        editFrom(row) {
            this.$router.replace({
                name:'formNewAdd',
                query: {
                    type:'editForm',
                    form_no:row.form_no,
                }
            });
        },
        // 跳转到新建表单页面
        addForm(row) {
            this.$router.replace({
                name:'formNewAdd',
                query: {
                    type:'addForm',
                    form_no:'',
                    page: this.page.now_page
                }
            });
        },
        // 跳转到统计结果页面
        toViewsubmit(row) {
            this.$router.replace({
                name:'studentForm-count',
                query: {
                    form_no:row.form_no,
                }
            });
        },
        getsecelt(){
            this.$post('/student/custom_form%5Cget_simple_list',{
            }, resp => {
                if (resp.code == 1) {
                    this.options = resp.data.list;
                    this.options.unshift({
                        title:'全部',
                        form_no:'',
                    });
                }
            });
        },
        selectTitle(){
            if(this.value == ''){
                this.getTableData(1);
            }
            this.tableData.map((item) =>{
                if(item.form_no == this.value){
                    this.tableData = [];
                    this.tableData.push(item);
                }
            });
        },
        // 删除表单
        fnIfication (row) {
            this.$confirm('删除当前表单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/custom_form%5Cdelete', {
                    form_no:row.form_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData(this.page.now_page);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {
            });
        },
    },

};
</script>

<style lang="less" scoped>
.preview-qr-wrap {
    width: 120px;
    height: 120px;
    text-align: center;
    margin: 0 auto;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>
<style lang="less" scoped>
.container {
    background-color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    .header {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
            .header-box {
                display: flex;
                margin-right: 15px;
                align-items: center;
                color: #606266;
                margin-bottom: 20px;
                float: right;
                    .header-title {
                        margin-right: 10px;
                        white-space: nowrap;
                    }
                }
            }
        .has-gutter{
            th{
                text-align: center;
            }
        }
        .pagination-wrapper {
            padding-top: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
.has-gutter{
th{
text-align: center;
}
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
    float: right;
    padding: 0;
    background-color: transparent;
}

}

</style>
